<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="maqettadocs.css" />
<title>Maqetta Preview 6 Release Notes</title>
</head>

<body class="maqettadocs">
<!-- Header -->
<!--
<iframe src ="header.html" width="100%" height="60" frameborder="0" scrolling="no" >
  <p>Your browser does not support iframes.</p>
</iframe> 
-->
<div id="pagebody">

<style type="text/css">
.majortopic { font-size:105%; font-weight:bold; color:#a0a; }
.minortopic { font-weight:bold; }
</style>

<table class="breadcrumbs noprint"><tr>
	<td> &nbsp; </td>
    <td class="prevnext">
    <a href="releasenotes/preview5.html">Previous</a> / <a href="releasenotes/release7.html">Next</a>
    </td></tr>
</table>


<h1>Maqetta Preview 6</h1>

<h2>Preview 6 release notes</h2>

<p>The Preview 6 release includes the following updates:</p>

<ul style="margin-top: 0pt;" type="disc">
	<li><p><span class='majortopic'>Visual editor enhancements and improvements</span> - 
		Preview 6 contains many improvements to the visual page editor:</p>
		<ul>
			<li><span class='minortopic'>Selection chrome has new look (and revised behavior)</span> - 
				In preview releases, the selection chrome around a widget was a gray hash pattern.
				With Preview 6, the selection chrome is a two-tone blue rectangle, with circular resize
				nobs at the corners. With Preview 6, you can resize horizontally by pulling on the left or right edges
				of the selection chrome, resize vertically by pulling on top or bottom edges, and change both
				width and height by pulling on the corner resize nobs.
			</li>
			<li><span class='minortopic'>Ability to drag a widget by mouse-down on interior</span> - 
				In preview releases, to move a widget, you had to first select the widget and then mouse-down
				on the selection chrome that surrounds the widget. (Dragging on interior of a selected widget would do nothing).
				Now with Preview 6, you can move selected widgets by dragging anywhere within the bounds of the widget
				(i.e., widget interior or border).
			</li>
			<li><span class='minortopic'>Elastic band select</span> - 
				With Preview 6, you can now drag out a selection rectangle to select all widgets
				that are enclosed by that rectangle. Elastic band select starts with a mouse down
				within the document area of visual page canvas. (NOTE: If the mouse down operation occurs
				over a currently selected widget, then the drag operation will move the selected widget
				rather than initiate elastic band selection. Also, if the mouse down operation occurs
				over a primitive widget such as a Button, the drag operation will immediately select
				the primitive widget and initiative a move operation on that widget.)
			</li>
			<li><span class='minortopic'>Alt-key or Option-key to copy a widget with drag operation</span> - 
				When you drag on the currently selected widget, you move that widget.
				With Preview 6, if you hold down the Alt key (Windows) or Option key (Mac),
				then the drag operation will copy the selected widgets, and place the copied widgets at
				the drop location.
			</li>
			<li><span class='minortopic'>Select parent, Select ancestor, Unselect all</span> - 
				Preview 6 adds three commands to the context menu on the visual page editor that provide some convenient
				operations related to widget selection:
				<ul>
					<li>Select parent - switches selection from the current widget to that widget's parent</li>
					<li>Select ancestor - brings up a small dialog that list the current widget's parent and all other ancestors, and
						allows the user to change the selection to any of the ancestors.</li>
					<li>Unselect all - makes it so that no widgets are selected</li>
				</ul>
				These commands are only enabled when the current selection consists exclusively of absolutely positioned widgets,
				and amount to changing the position of the currently selected child widget within its parent's list of children.
				For example, "Move to front" makes the currently selected widget the last child, which in most cases causes
				that widget to be drawn on top of its sibling widgets.
			</li>
			<li><span class='minortopic'>Move to front, move to back, etc (absolutely positioned widgets)</span> - 
				Preview 6 adds four commands to the context menu on the visual page editor that allow convenient
				reordering of widgets, particularly to allow obscured widgets to come to the front visually:
				<ul>
					<li>Move to front</li>
					<li>Move to back</li>
					<li>Move forward</li>
					<li>Move backward</li>
				</ul>
				These commands are only enabled when the current selection consists exclusively of absolutely positioned widgets,
				and amount to changing the position of the currently selected child widget within its parent's list of children.
				For example, "Move to front" makes the currently selected widget the last child, which in most cases causes
				that widget to be drawn on top of its sibling widgets.
			</li>
		</ul>
	</li>
	<li><p><span class='majortopic'>Properties palette improvements</span> - 
		Preview 6 contains various improvements to the Properties palette:</p>
		<ul>
			<li><span class='minortopic'>'moveTo' properties provide drop-downs of current mobile views</span> - 
				(Mobile UIs only) Various mobile widgets have a 'moveTo' property which indicates
				the mobile view to which the application should jump if the user presses on the current widget.
				With Preview 6, we have included a drop-down for the 'moveTo' property that shows the IDs
				of all of the Views in the current document.
			</li>
			<li><span class='minortopic'>'class' attribute provides drop-down list of currently used classes</span> - 
				The 'class' attribute field in the Properties palette now provides a drop-down list
				of currently used classes. This is convenient if the author needs to apply the same class
				to multiple widgets.
			</li>
			<li><span class='minortopic'>'class' and 'id' 'fields on separate lines, and are stretchable</span> - 
				The 'class' and 'id' fields are now on separate lines in Properties palette,
				and the fields stretch in size as the Properties palette's widget is changed (typically
				by pulling on the splitter between the Properties palette and the visual page editor canvas).
			</li>
		</ul>
	</li>
	<li><p><span class='majortopic'>GridX support, with creation wizard that allows for column control</span> - 
		Preview 6 now supports the powerful GridX widget for advanced display of tabular data.
		Upon dropping a GridX widget or double-clicking on an existing one, a 3-pane wizard appears:
		<ul>
			<li>Pane 1 - choose data source -
				either user-entered dummy data, 
				data file from user workspace (either JSON or CSV), or 
				remote data from arbitrary URL (JSONP))</li>
			<li>Pane 2 - choose columns - user decides which columns to include or exclude
			<li>Pane 3 - column widths
		</ul>
	</li>
	<li><p><span class='majortopic'>Drawing tool improvements: drag/click-select creation of lines and polylines</span> - 
		Preview 6 replaces the old line widgets (Line, Arrow, Horizontal Line, Vertical Line) with
		a different collection: Line, Arrow, Polyline, Polyline Arrow. 
		<p>To create Lines or Arrows, either:</p>
		<ul>
			<li>Drag a Line or Arrow widget from Widget palette onto canvas. The result will be a
				default widget (horizontal) which you can modify by pulling on nobs.</li>
			<li>Click on widget in Widgets palette, then click on canvas. Just like previous bullet,
				the result will be a default widget (horizontal).</li>
			<li>Click on widget in Widgets palette, then drag out the desired position and size on canvas.</li>
		</ul>
		<p>To create Polylines or Polyline Arrows:</p>
		<ul>
			<li>Drag a PolyLine or Polyline Arrow widget from Widget palette onto canvas. The result will be a
				default widget (two segements) which you can modify by pulling on nobs.</li>
			<li>Click on widget in Widgets palette, then click on canvas. Just like previous bullet,
				the result will be a default widget (two segments).</li>
			<li>Click on widget in Widgets palette, then repeatedly click on canvas to define end points.
				To stop adding points, either click a second time on the last point or press the Esc key.</li>
		</ul>
	</li>
	<li><p><span class='majortopic'>Mobile UI sketching, including clip art widgets for some mobile devices</span> - 
		In previous releases, it wasn't feasible to use do quick UI sketching using mobile widgets, 
		but with Preview 6, there have been numerous improvements around mobile UI sketching:
		<ul>
			<li><span class='minortopic'>Mobile device silhouetts as clip art widgets</span>
				Preview 6 includes the follow six new clipart widgets that are pixel-accurate silhouettes
				for a handful of popular mobile devices. In some scenarios, users want to do quick UI sketching
				of mobile UIs where the picture of the device is in the background, and other widgets 
				are placed on top of the device silhouette (using absolute positioning).
				For all six of these clipart widgets, the default orientation is portrait, but orientation
				can be changed to landscape by selecting the given widget and changing the 'orientation' property
				in the Widget-Specific section of the Properties palette.
				<ul>
					<li>iPhone</li>
					<li>iPad</li>
					<li>Android devices: Android_340x480, Android_480x800, AndroidTablet</li>
					<li>Blackberry phone</li>
				</ul>
			</li>
			<li><span class='minortopic'>Mobile widget improvements in sketch mode</span>
				Preview 6 includes countless fixes so that Dojo Mobile widgets can be used
				in sketch mode. In sketch mode, users can drag/drop widgets, clip art,
				and shapes (using the Drawing Tools widgets), where Maqetta acts like
				a simple drawing tool. Sketch mode is good for quick&amp;dirty mockups
				in very early phases of a UI design.
			</li>
			<li><span class='minortopic'>New mobile sketching tutorial</span>
				The documentation for Preview 6 includes a new tutorial on quick sketching
				of mobile user interfaces.
			</li>
		</ul>
	</li>

	<li><p><span class='majortopic'>Mobile UI improvements</span> 
		<ul>
			<li>Mobile silhouette orientation now persists.</li>
			<li>moveTo property now lists existing mobile view ids. Also supports hash values.</li>
			<li>You can now drag and drop widgets into ListItems.</li>
			<li>IconContainer now has a easier to use editing tool.</li>
			<li>Leverage  of data-dojo-config attribute for more robust mobile theme switching, as a result cloned a mobile theme will require modification of the dojo-theme-editor.html file of the cloned theme. The html source editor can be used to  
change the line: <i> &lt;script type="text/javascript" src="/maqetta/app/static/lib/dojo/1.7/dojo/dojo.js" data-dojo-config="parseOnLoad: true, async: true"&gt;&lt;/script&gt; </i>
to: <i>
&lt;script type="text/javascript" src="/maqetta/app/static/lib/dojo/1.7/dojo/dojo.js" data-dojo-config="parseOnLoad: true, async: true, 'themeMap':[['.*',null,[]]],'mblThemeFiles':[]"&gt;&lt;/script&gt; </i>
			</li>
			
		</ul>
	</li>
	<li><p><span class='majortopic'>Limited PHP file support</span> - 
		<p>Preview 6 includes limited support for *.php files.
		If you double-click on a *.php file in the Files palette, the HTML visual page editor opens. 
		The visual editor ignores any <code>&lt;?php ... ?&gt;</code> constructs in the *.php file (treating them the same as HTML comments).
		If you click on preview-in-browser for a *.php file, then the file is downloaded to the browser with mime-type <code>text/html</code>,
		which results in the browser doing whatever it does if cases when a *.html file happens to contain <code>&lt;? ... ?&gt;</code> constructs
		(usually ignored).</p>
		<p>This feature can be useful for web application developers where they need to include small amounts of PHP in their
		files, but note that Maqetta has no ability to actually run a PHP engine against the PHP constructs; all that Maqetta does is
		do its best to ignore everything within a <code>&lt;?php ... ?&gt;</code> block. </p>
		<p>Developers who attempt to use this feature need to be careful that 
		their *.php file (assuming <code>&lt;?php ... ?&gt;</code> constructs are ignored)
		can be interpreted by the Maqetta page parser
		as a well-formed HTML file.</p>
	</li>
	<li><p><span class='majortopic'>CSV data file support</span> - Preview 6 now supports using CSV files for widgets that consume
	data (such as GridX, DataGrid or EdgeToEdgeDataList) and a sample csv file (sample.csv) is included.  Previously only JSON files could be consumed.
	</li>
	<li><p><span class='majortopic'>Many bug fixes</span> - 
		Preview 6 includes many miscellaneous bug fixes. Some of those fixes
		can be seen by going to 
		<a href="https://github.com/maqetta/maqetta/issues?labels=&milestone=15&page=1&state=closed" target="_blank">
		this URL which lists bugs closed against the Preview 6 release</a>.
	</li>
</ul>

<h2>Migration of User Workspaces</h2>

<p>Preview 6 changes how files are constructed and stored in users' workspaces.  If you are using Preview 5 and wish to deploy Preview 6, you can migrate the users' files by using the <a href="https://raw.github.com/maqetta/maqetta/master/migration/m5-m6-migrate.sh" target="_blank">m5-m6-migrate.sh</a> script.  Download and script and run from within your "users" directory.</p>

<p><em>Note:</em> The script only works on Unix-based systems.</p>

<p> </p>

<p class="prevnext">
    <a href="releasenotes/preview5.html">Previous</a> / <a href="releasenotes/release7.html">Next</a>
</p>

</div>  <!-- pagebody -->

<!-- Footer -->
<!--
<iframe src ="footer.html" width="100%" height="60" frameborder="0" scrolling="no" >
  <p>Your browser does not support iframes.</p>
</iframe> 
-->

</body>
</html>